<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>收货统计</h2>
                </div>
				<br>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
					<Card style="margin-bottom: 10px;">
					    <div class="normal-list-page-hd clearfix">
							<Col span="4">
							    类型：
							    <Select v-model="model1"  style="width:200px" @on-change="type($event)">
							        <Option v-for="item in tradeType" :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>
							</Col>
					        <Col span="4">
					            时间段：<DatePicker :modle="value2" :value="value2"  type="daterange" :options="options2" confirm placement="right-start" @on-change="times" placeholder="选择时间"  style="width: 200px"></DatePicker>
					        </Col>
							<Col span="3">
							    方式：
							    <Select v-model="model2"  style="width:100px" @on-change="way($event)">
							        <Option v-for="item in tradeway"  :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>
							</Col>
					        <Button size="large" icon="search" @click='inQuire' >查询</Button>
					    </div>
							
					</Card>
					<div id="myChart" :style="{width: '80vw', height: '60vh'}"></div>
                   <!-- <div class="normal-list-page-bd">
                        <Table border :loading="list.loading" :columns="list.columns" :data="list.tableData" ></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.pageNum" @on-change="changePage" @on-page-size-change="onPageSizeChange" show-sizer></Page>
                    </div> -->
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import reaptotalApi from "@/api/statistics/reaptotal.js";
    import moment from "moment";
    import { Message } from "iview";

    export default {
        name: "coInGoodsType",
        data() {
            return {
				tradeType:[
					{
					    value: 1,
					    label: '收获汇总(趋势图)'
					},
					{
					    value: 2,
					    label: '收获汇总(按品类)'
					}
					
				],
				model1:1,
				model2:1,
				tradeway:[
					{
					    value: 1,
					    label: '按金额'
					},
					{
					    value: 2,
					    label: '按重量'
					},
					{
					    value: 3,
					    label: '按价格'
					},
					
					
				],
				options2: {
					shortcuts: [
						{
							text: '近一周',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								return [start, end];
							}
						},
						{
							text: '近一月',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								return [start, end];
							}
						},
						{
							text: '近三月',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								return [start, end];
							}
						}
					]
				},
            
				value2: [],
          
            // 页面查询数据
            queryData: {
               
            }
        };
        },
		 mounted(){
		        // this.drawLine();
				this.ways=this.tradeway[0].value;
		    },
        methods: {
            // 获取列表
			times(e){
				let that = this ;
				that.queryData.startDate = e[0];
				that.queryData.endDate = e[1];
				// console.log(e[0])
				// console.log(moment.unix(Date.now()/1000).format("YYYY-MM-DD"))
			},
			type(e){
			    let that = this ;
			    
			},
			way(e){
				
			},
			// drawLine(){
			// 	// 基于准备好的dom，初始化echarts实例
			// 	var myChart = this.$echarts.init(document.getElementById('myChart'))
			// 	// 绘制图表
			// 	myChart.setOption({
			// 		title: { text: '在Vue中使用echarts' },
			// 		tooltip: {},
			// 		xAxis: {
			// 			type: 'category',
			// 			data: ['11','22']
			// 		},
			// 		yAxis: {},
			// 		series: [{
			// 			name: '销量',
			// 			type: 'line',
			// 			data: ['1','2']
			// 		}]
			// 	});
			// },

    //         getTableData() {
				// 	const that = this;
				// 	that.queryData.totalRecord = undefined;
				// 	CoInGoodsTypeApi.getPageList(that.queryData)
				// 			.then(res => {
				// 		that.list.tableData = res.data.list;
				// 	that.queryData.totalRecord = res.data.totalRecord;
				// 	that.queryData.page = res.data.page;
				// 	that.queryData.limit = res.data.pageSize;
				// })
				// .catch(error => {
				// 		Message.error(error);
				// });
    //         },
			getTablezx() {
			    const that = this;
			     // console.log(that.queryData)
			   reaptotalApi.getzxList(that.queryData)
			            .then(res => {
			     console.log(res)
				 // 基于准备好的dom，初始化echarts实例
				 var data=[]
				 var data1=[]    //总价	
				 var data2=[]	//总重
				 var data3=[]	//单价
				 var data4=[]  //日期
				 var name
				 for(var i=0;i<res.data.length;i++){
					 data1[i]=res.data[i].finalPrice,
					 data2[i]=res.data[i].weight,
					 data3[i]=res.data[i].unitPrice,
					 data4[i]=res.data[i].createTime
					 // data4[i]=moment.unix(res.data[i].createTime/1000).format("YYYY-MM-DD")
				 }
				 if(that.model2==1){
					 data=data1,
					 name='金额(元)'
				 }
				 if(that.model2==2){
					 data=data2,
					 name='重量(吨)'
				 }
				 if(that.model2==3){
					 data=data3,
					 name='单价(元/吨)'
				 }
				 var myChart = this.$echarts.init(document.getElementById('myChart'))
				 // 绘制图表
				 myChart.setOption({
				 	title: { text:name+'('+this.queryData.startDate+'至'+this.queryData.endDate+')'},
				 	color:['#2894FF'],
					tooltip: {
					        trigger: 'axis'
					    },
					grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '3%',
					        containLabel: true
					    },
				 	xAxis: {
				 		type: 'category',
						
				 		data: data4
				 	},
				 	yAxis: {},
				 	series: [{
				 		name: name,
				 		type: 'line',
						smooth:true,
				 		data: data
				 	}]
				 });
			})
			.catch(error => {
			        Message.error(error);
			});
			},
			getTablezh() {
			    const that = this;
			     console.log(that.queryData)
			   reaptotalApi.getzhList(that.queryData)
			            .then(res => {
			     console.log(res)
				 // 基于准备好的dom，初始化echarts实例
				 var data=[]
				 var data1=[]    //总价	
				 var data2=[]	//总重
				 var data3=[]	//单价
				 var data4=[]  //日期
				 var name
				 for(var i=0;i<res.data.length;i++){
					 data1[i]=res.data[i].finalPrice,
					 data2[i]=res.data[i].weight,
					 data3[i]=res.data[i].unitPrice,
					 data4[i]=res.data[i].goodsName
				 }
				 if(that.model2==1){
					 data=data1,
					 name='金额(元)'
				 }
				 if(that.model2==2){
					 data=data2,
					 name='重量(吨)'
				 }
				 if(that.model2==3){
					 data=data3,
					 name='单价(元/吨)'
				 }
				 var myChart = this.$echarts.init(document.getElementById('myChart'))
				 // 绘制图表
				 myChart.setOption({
				 	title: { text:name+'('+this.queryData.startDate+'至'+this.queryData.endDate+')'},
				 	tooltip: {},
					color:['#2894FF'],
				 	xAxis: {
				 		type: 'category',
				 		data: data4
				 	},
				 	yAxis: {},
				 	series: [{
				 		name: name,
				 		type: 'bar',
						
				 		data: data
				 	}]
				 });
			})
			.catch(error => {
			        Message.error(error);
			});
			},
            // 查询
            inQuire() {
                const that = this;
                // sytotalApi.getPageList(that.queryData);
				if(that.model1==1){
					that.getTablezx();
				}else{
					that.getTablezh();
				}
                
				
            },

            // //每页显示记录数变更
            // onPageSizeChange(pageSize) {
            //     this.queryData.limit = pageSize;
            //     this.getTableData();
            // },

            // // 换页
            // changePage(page) {
            //     this.queryData.page = page;
            //     this.getTableData();
            // },

          
        },

        created() {
			
			this.queryData.startDate=this.value2[0]=moment.unix(Date.now()/1000).format("YYYY-MM-DD");
			this.queryData.endDate=this.value2[1]=moment.unix(Date.now()/1000).format("YYYY-MM-DD");
            // this.getTableData();
        }
    };
</script>
